<template>
  <div>
      <h1>table</h1>
      <table class="table">
          <thead>
              <tr>
                  <th>id</th>
                  <th>name</th>
                  <th>price</th>
                  <th>操作</th>
              </tr>
          </thead>
          <tbody>
              <tr v-for="item in list" :key="item.id">
                  <td>{{ item.id }}</td>
                  <td>{{ item.name }}</td>
                  <td>{{ item.price }}</td>
                  <td><button @click="handler(item)">编辑</button></td>
              </tr>
          </tbody>
      </table>
  </div>
</template>

<script setup>
/**
* 作业:

[
      {
          "id": 1,
          "name": "奥迪 Q7",
          "price": 650000
      },
      {
          "id": 2,
          "name": "宝马 X6",
          "price": 700000
      },
      {
          "id": 3,
          "name": "奔驰 S350",
          "price": 1200000
      }
  ]

要求:
在信息展示界面使用表格展示该列表，点击每行中编辑按钮 跳转至编辑界面，展示编辑商品信息，并在编辑商品信息界面中可以编辑信息。编辑后点击完成按钮 返回信息展示界面，并可以看到修改后的信息。 

*/
import { ref, watch } from 'vue'
import { useRouter,useRoute } from 'vue-router'
const list = ref([{
  id: 1,
  name: "奥迪Q7",
  price: 650000
},
{
  id: 2,
  name: "宝马X6",
  price: 700000
},
{
  "id": 3,
  name: "奔驰S350",
  price: 1200000
  }])

const router = useRouter();
//定义编辑函数
const handler = item => {
      //通过动态路由方式进行传参
      router.push({ name: 'edit', params: { id:item.id,name:item.name,price:item.price} })
}

const route = useRoute();
// 定义变量temp 接收querystring 参数
const temp = ref(route.query) 
//监听变量temp
watch(temp, (newValue, oldValue) => {
  // console.log('newValue=>', newValue, 'oldValue=>', oldValue);
  //通过find 查找到接收的id 进行资料编辑
  list.value.find(item => {
      if (newValue.id == item.id) {
          //赋值
          item.name = newValue.name
          item.price=newValue.price
      }
  })
}, {
  flush: 'pre',
  deep: true,
  immediate: true
})



</script>

<style  scoped>

</style>